<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="order by dede58.com"><title>后台管理系统</title>
    <link rel="stylesheet" href="../../static/css/style.css">
    <link rel="stylesheet" href="../../static/css/jquery.wysiwyg.old-school.css">
    
    <!-- jQuery AND jQueryUI -->
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../static/js/min.js"></script>
    <script type="text/javascript" src="../../static/js/main.js"></script>
    <link rel="stylesheet" href="../../static/css/style2.css">
    <script type="text/javascript" src="../../static/js/common.js"></script>
</head>
<body>
<div id="content" class="white">
    <h1 style="margin-bottom: 20px"><img src="../../static/images/posts.png" alt="">员工管理</h1>
    <!--操作栏-->
    <div class="bloc">
        <div class="title"> 操作 <a class="toggle"></a></div>
        <div class="content dashboard">
            <div class="center" style="display: block; width: auto;">
              <a href="javascript:;" onclick="add()">新增员工</a>
                <a href="javascript:;">
                    批量删除 </a>
            </div>
        </div>
    </div>
    
    <div class="bloc">
        <div class="title">员工列表</div>
        <div class="content">
            <table>
                <thead>
                <tr>
                    <th><input type="checkbox" id="selectALL" onclick="selectAll(this)">全选</th>
                    <th>部门名称</th>
                    <th>登录名称</th>
                    <th>真实姓名</th>
                    <th>员工状态</th>
                    <th>是否删除</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="listuser">
                
                </tbody>
            </table>
    </div>
</div>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>
<script type="text/javascript">
    
    var options=new Array();
    <c:forEach var="option" items="${optionlist}">
    var dictionary={"type":"${option.type_Id}","value":${option.value},"name":"${option.name}"};
     options.push(dictionary);
    </c:forEach>
    
    var o=getDictionary("sex",1,options);
    console.log(o);
    //加载员工列表
    loadUserlist(1);
    function loadUserlist(page){
         $("tbody#listuser").html("");
        $.ajax({
            url:"<%=request.getContextPath()%>/userServlet",
            type:"GET",
            data:"opr=listUser&startRow="+(page-1)*7+"&pageSize=7",
            dataType:"json",
            success:function (result) {
                console.log(result[0][0],result[0][1],result[2]);
                var stuUser="";
                $.each(result[1],function (index,ele) {
                    stuUser+="<tr onclick='showdetail(this)'>";
                    stuUser+="<td><input type='checkbox' class='UserId'><input type='hidden' value='"+ele.id+"'> </td>"
                    stuUser+="<td>"+getdep(result[2],ele.dept_id)+"</td>";
                    stuUser+="<td>"+ele.login_name+"</td>";
                    stuUser+="<td>"+ele.real_name+"</td>";
                    stuUser+="<td>"+getDictionary("userStatus",ele.status,options)+"</td>";
                    stuUser+="<td>"+getDictionary("delFlag",ele.delflag,options)+"</td>";
                    stuUser+="<td><a href='javascript:;' title='修改' onclick='update(this)'>\n" +
                        "<img src='../../static/images/edit.png'></a>\n" +
                        "<a href='javascript:;' title='删除' onclick='del(this)'>\n" +
                        "<img src='../../static/images/delete.png'></a>" +
                        "</td>";
                    stuUser+="</tr>";
                });
                var pageStr="";
                if (result[0][1]>1) {
                    if (page == 1) {
                        pageStr += "<tr>";
                        pageStr +=
                            "<td><a href='javascript:;' onclick='loadUserlist(" + eval(parseInt(page) + 1) + ")'>下一页</a></td>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(" +
                            result[0][1] + ")'>末页</a></td>";
                    } else if (page == result[0][1]) {
                        pageStr += "<tr>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(1)'>首页</a></td>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(" + eval(page - 1) + ")'>上一页</a></td>";
                    } else if (page > 1 && page < result[0][1]) {
                        pageStr += "<tr>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(1)'>首页</a></td>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(" + eval(page - 1) + ")'>上一页</a></td>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(" + eval(parseInt(page) + 1) + ")'>下一页</a></td>";
                        pageStr += "<td><a href='javascript:;' onclick='loadUserlist(" + result[0][1] + ")'>尾页</a></td>";
                    }
                    pageStr+="</tr><tr>"
                    pageStr += "<td>总记录数" + result[0][0] + "条</td><td>每页7条</td>";
                    pageStr += "<td>页数" + page + "/" + result[0][1] + "页</td>";
                    pageStr += "</tr>";
                }
                $("tbody#listuser").append(stuUser);
                $("tbody#listuser").append(pageStr);
            }

        });
    }
    
  
    

    //查看员工详情
    function showdetail(obj){
        var $title=$(obj).parent().prev();
        console.log($title.children("tr#detail").length);
        if ($title.children("tr#detail").length==0){
            $title.append("<tr id='detail'>\n" +
                "<th>性别</th><th>邮箱</th><th>联系电话</th><th>联系地址</th><th>职位</th>\n" +
                "</tr>");
        }
        var userId=$(obj).find(":input[type='hidden']").val();
        var $detailUser=$(obj).next("tr.detailUser");
        console.log(userId);
        console.log($detailUser.length);
        if ($detailUser.length==0){
            $.ajax({
                url:"<%=request.getContextPath()%>/userServlet",
                data:"Id="+userId+"&opr=detailUser",
                dataType: "json",
                type:"GET",
                success:function (result) {
                    console.log(result);
                    var stuUser="";
                    stuUser+="<tr onclick='hiding(this)' class='detailUser'>";
                    stuUser+="<td>"+getDictionary("sex",result.sex,options)+"</td>";
                    stuUser+="<td>"+result.email+"</td>";
                    stuUser+="<td>"+result.tel+"</td>";
                    stuUser+="<td>"+result.address+"</td>";
                    stuUser+="<td>"+result.id+"</td>";
                    stuUser+="</tr>";
                    $(obj).after(stuUser);
                }

            });
        }
      
    }
    
    //删除单个员工
    function  del(obj) {
        var userId=$(obj).parent().siblings("td").children("[type='hidden']").val();
        var confirm=window.confirm("确定删除吗？")
        if (confirm===true){
         $.ajax({
             url:"<%=request.getContextPath()%>/userServlet",
             data:"Id="+userId+"&opr=deleteUser",
             dataType:"text",
             type:"GET",
             success:function (result) {
                 console.log(result)
                 if (result=='true'){
                     alert("删除成功！");
                     window.location.reload();
                 }else {
                     alert("删除失败！");
                 }
             }
         })
        }
    }
    
    
//更新单个员工信息
    function update(obj) {
            var userId=$(obj).parent().siblings("td").children("[type='hidden']").val();
            console.log(userId);
        window.location.href="employUpdate.jsp?id="+userId;
    }
    
    function add() {
        window.location.href="employAdd.jsp";
    }
    
    //详情行点击后自动隐藏
    function hiding(obj) {
        var $detailUser=$("tr.detailUser").find("tr[style='display:none']");
        var $detail=$("tr#detail");
        $(obj).toggle();
        if ($detailUser.length==0){
            $detail.remove();
        }
    }
    //其他复选框取消选中时全选取消
    function checkFalse(obj){
        if(!$(this).is(":checked")){
            $("#selectALL").prop("checked",false);
        }
    }

    //全选
    function selectAll(obj){
        //prop() 方法设置或返回被选元素的属性和值
        if($(obj).is(':checked')){
            $(":checkbox").prop("checked",true);
        }else {
            $(":checkbox").prop("checked",false);
        }
    }

    /**
     * 获取数据字典的值
     * @param type
     * @param value
     * @returns {*}
     */
    // function getDictionary(type,value,array) {
    //     var optionName;
    //     for (var i=0;i<array.length;i++){
    //         if (type===array[i].type && value===array[i].value){
    //             optionName=array[i].name;
    //             break;
    //         }
    //     }
    //     return optionName;
    //     }

    /**
     * 获得部门信息的值
     * @param array
     * @param id
     * @param type
     * @returns {*}
     */
    function getdep(array,id) {
        var value;
        for (var i=0;i<array.length;i++){
            if (array[i].id == id){
                value=array[i].name;
                break;
            }
        }
        return value;
    }

    /**
     * 获得职位的值
     * @param array
     * @param id
     * @param type
     * @returns {*}
     */
    function getforeignkey(array,id) {
        var value;
        for (var i=0;i<array.length;i++){
            if (array[i].id == id){
                value=array[i].role_name;
                break;
            }
        }
        return value;
    }
    
    
    
    
</script>

</html>
